<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <router-link class="navbar-brand" :to="{name:'home'}">
            蛇
        </router-link>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">+</button>
        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <router-link :class="route_name == 'pk_index' ? 'nav-link active' : 'nav-link'" :to="{name:'pk_index'}" >对战</router-link>
                </li>
                <li class="nav-item">
                    <router-link :class=" route_name == 'record_index' ? 'nav-link active' : 'nav-link'" :to="{name:'record_index'}" >对局列表</router-link>
                </li>
                <li class="nav-item">
                    <router-link :class="route_name == 'ranklist_index' ? 'nav-link active' : 'nav-link'" :to="{name:'ranklist_index'}">排行榜</router-link>
                </li>
            </ul>
            <ul class="navbar-nav" v-if="$store.state.user.is_login">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        {{ $store.state.user.username }}
                    </a>
                    <ul class="dropdown-menu" style="margin:0">
                        <li><router-link :to="{name:'user_bot_index'}" class="dropdown-item" href="#">我的Bot</router-link></li>
                        <li><a class="dropdown-item" href="#" @click="logout">退出 action</a></li>
                    </ul>
                    </li>

            </ul>
            <ul class="navbar-nav" v-else-if="!$store.state.user.pulling_info">
                <li class="nav-item">
                    <router-link :to="{name: 'user_account_login'}" class="nav-link" href="#" role="button">
                        登录
                    </router-link>
                </li>
                <li class="nav-item">
                    <router-link :to="{name: 'user_account_register'}" class="nav-link" href="#" role="button">
                        注册
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</nav>
</template>

<script>
import { useRoute } from 'vue-router';
import { computed } from '@vue/reactivity';
import { useStore } from 'vuex';

export default{
    setup(){
        const store = useStore();
        const route = useRoute();
        let route_name = computed(() => route.name)

        const logout = () =>{
            store.dispatch("logout");
        }
        return {
            route_name,
            logout
        }
    }
}
</script>

<style scoped>
</style>
